<template>
  <div class="discount-container">
    <div class="type">全场加价购</div>
    <div class="message">再购 <span class="price">98.1</span> 元立享【满130元可超值换购】</div>
    <div class="button">查看换购</div>
    <div class="link">继续凑单 &gt;</div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="less" scoped>
@import "../../styles/variable";

.discount-container {
  align-items: center;
  background: @bg-cart;
  border: 1px solid @border-grey;
  display: flex;
  font-size: 14px;
  height: 46px;
  padding: 0px 30px 0px 60px;
  .type {
    background-color: @bg-tips;
    color: #fff;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    padding: 0px 6px;
    margin-right: 10px;
  }
  .message {
    margin-right: 30px;
    .price {
      color: @font-color-price;
    }
  }
  .button {
    background-color: #fff;
    border: 1px solid @color-warning;
    color: @color-warning;
    cursor: pointer;
    font-size: 12px;
    width: 66px;
    margin-right: 20px;
    text-align: center;
  }
  .link {
    color: @font-color-link;
    cursor: pointer;
  }
}
</style>
